<template>
  <div v-if="comments.length > 0">
    <div v-for="(item, index) in comments" :key="index"  class="card">
      <div class="card-block">
      <p class="card-text">
        {{item.body}}
      </p>
      </div>
      <div class="card-footer">
        <router-link :to="'/profile/' + item.author.username" class="comment-author">
          <img :src="item.author.image" class="comment-author-img" />
        </router-link>
        &nbsp;
        <router-link :to="'/profile/' + item.author.username" class="comment-author">{{item.author.username}}</router-link>
        <span class="date-posted">{{item.createdAt}}</span>
        <span class="mod-options" v-if="item.author.username === user.username">
          <!-- <i class="ion-edit"></i> -->
          <i class="ion-trash-a" @click="deleteComment(item.id)"></i>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { reqGetComment } from '../../../api/article'
import {mapState} from 'vuex'
export default {
  name: "",
  data() {
    return {
      comments: []
    }
  },
  methods: {
    async getComment(){
      const result = await reqGetComment(this.$route.params.aid)
      this.comments = result.comments
    },

    deleteComment(id){
      this.$emit('deleteComment', id)
    }
  },
  created() {
    this.getComment()
  },
  computed: {
    ...mapState({
      user: state => state.user
    })
  },
};
</script>
<style lang="less" scoped></style>
